import React, { useState } from 'react'
import '../assets/style/todo.css'
export default function Todo() {
    const [list, setList] = useState([
        { tit: '学vue', id: 0, states: 'done' },
        { tit: '学java', id: 1, states: 'done' },
        { tit: '学js', id: 2, states: 'undone' },
        { tit: '学react', id: 3, states: 'undone' },
    ])
    const [btns, setBtns] = useState([
        { tit: '全部', select: 'all', id: 1 },
        { tit: '未完成', select: 'undone', id: 2 },
        { tit: '已完成', select: 'done', id: 3 },
    ])
    const [Select, setSelect] = useState('all')
    const todoList = React.useMemo(() => {
        switch (Select) {
            case 'done': return list.filter(item => item.states === 'done');
            case 'undone': return list.filter(item => item.states === 'undone');
            default: return list;
        }
        return t
    }, [list, Select])
    const inputInf = React.useRef(null)
    function add(params) {
        console.log(inputInf.current.value);
        if (inputInf.current.value != '') {
            list.unshift({
                tit: inputInf.current.value,
                id: list.length,
                states: 'undone'
            })
            inputInf.current.value = ''
            setList([...list])
        }
    }
    function changeCss(e) {
        list.forEach(item => {
            if (item.id == e) {
                item.states === 'done' ? item.states = 'undone' : item.states = 'done'
                return
            }
        })
        setList([...list])
    }
    function changeBtn(e) {

        setSelect(e)
    }

    return (
        <div>
            <div><input type="text" ref={inputInf} /> <button onClick={add} >添加任务</button></div>
            <ul>
                {todoList.map(item => {
                    return <li className={item.states} onClick={() => changeCss(item.id)} key={item.id}>{item.tit}</li>
                })}
            </ul>
            <div>{btns.map((item, index) => {
                return <button onClick={() => changeBtn(item.select)} className={item.select === Select ? 'active' : ''} key={item.id}>{item.tit}</button>
            })}</div>
        </div>
    )
}
